CSS 函数

CSS 函数 path() 接受 SVG 路径字符串，并在 CSS 形状和 CSS 运动路径中使用来定义形状的轮廓。

可能的值

  • <'fill-rule'> - 该属性确定路径内部填充的规则，可以使用非零或evenodd 等选项。默认值为非零。

  • <string> - 字符串用作定义 SVG 路径形状的数据。

语法

当在 offset-path 或 d 中使用时:

path(<string>)

当在 Clip-path 中使用时:

path([<'fill-rule'>,]?<string>)

CSS path(): 基本示例

在下面的示例中，path() 函数用作 offset-path 属性的值来定义红色方块要遵循的特定路径。

<html>
<head>
<style>
   #shape {
      width: 100px;
      height: 100px;
      background-color: red;
      offset-path: path("M10 80 Q 77.5 10, 145 80 T 280 80");
      offset-distance: 0%;
      animation: move 5s infinite linear;
   }
   @keyframes move {
      from {
      offset-distance: 10%;
   }
   to {
      offset-distance: 100%;
   }
   }
</style>
</head>
<body>
<div id="shape"></div>
</body>
</html>

CSS path( ): 使用 svg

  • 在以下示例中，path() 函数是一个 CSS 函数，用于在 SVG 的 d 属性内定义复杂形状元素。

  • d属性代表路径数据，决定元素的形状。

  • 通过动画， path()函数改变d属性，导致d元素的形状发生变化，产生视觉效果。

<html>
<head>
<style>
   svg {
      width: 300px;
      height: 200px;
      background-color: lightgray;
   }
   path {
      fill: blue;
      animation: modifyPath 2s infinite alternate;
   }
   @keyframes modifyPath {
      0% {
            d: path("M50 50 L150 50 L100 150 Z");
      }
      100% {
            d: path("M50 50 L150 50 L100 100 Z");
      }
   }
</style>
</head>
<body>
   <svg>
   <path></path>
   </svg>
</body>
</html>